<!DOCTYPE html>

<html>
	<head>
		<title>Zezer - Hangzhou</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />

		<link rel='stylesheet' type='text/css' href='css/sub_style.css' />
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		
		<script type="text/javascript">

			$(document).ready(function() {
				$(".naviItem").click(function() {
					var link_str = $(this).attr("href");
					window.location = link_str;
				});
				
				$(".btn_block").click(function() {
					var name = $(this).attr("name");
					var nextNode = $(this).parent().next();

					if (name == 'custom') {
						// show 1.1 section
						$("#customRoomType").fadeIn();
					} else {
						if ($(this).parent().attr("id") == "roomType") {
							$("#customRoomType").fadeOut();
						}
					}
					$(this).siblings().removeClass("selected");
					$(this).addClass("selected");
					
					// display next level block
					if ($(nextNode).attr("id") == 'customRoomType') {
						nextNode = $(nextNode).next();
					}
					$(nextNode).show();
				});
				
				$(".rich_block_container").mouseenter(function() {
					$(this).children(".rich_block").prev(".control_btn").text("+");
					$(this).children(".rich_block").next(".control_btn").text("-");
				});
				
				$(".rich_block_container").mouseleave(function() {
					$(this).children(".control_btn").html("&nbsp;");
				});
				
				$(".rich_block_container .control_btn").click(function() {
					var txt = $(this).text();
					var val = 0;
					var numberNode = null;
					if (txt == "+") {
						numberNode = $(this).next(".rich_block").children(".number");
						val = $(numberNode).text();
						val = parseInt(val) + 1;
					} else if (txt == "-") {
						numberNode = $(this).prev(".rich_block").children(".number");
						val = $(numberNode).text();
						val = ( parseInt(val) - 1 ) <= 1 ? 1 : parseInt(val) - 1;
					}
					$(numberNode).text(val);
				});
				
				$("#B_plan").click(function() {
					$("#price").text("5,000");
				});
				
				$("#S_plan").click(function() {
					$("#price").text("10,000");
				});
				
				$("#L_plan").click(function() {
					$("#price").text("25,000");
				});
				
				$("#vip_plan").click(function() {
					$("#price").text("--");
				});
			});
			
		</script>
	</head>
	
	<body>
		<div id="header">
			<div class="naviContainer">
				<div class="naviItem" href="index.html"> </div>
				<div class="naviItem" href="product.html">智慧科技</div>
				<div class="naviItem" href="solution.html">解决方案</div>
				<div class="naviItem active" href="quickstart.html">快速开始</div>
				<div class="naviItem" href="contact.html">联系我们</div>
				<div class="clr"> </div>
			</div>
		</div>
		
		<div id="content">
			<div class="main">
				<div class="left">
					<div class="info_block">
						<div class="title">摘要</div>
						<div class="body">
							<div class="info_line strong">RMB <span id="price">0.00</span></div>
							<div class="info_line"><div class="btn_ok" id="btn_save_order">OK</div></div>
						</div>
					</div>
					<div class="info_block">
						<div class="title">规格</div>
						<div class="body">
							<div class="info_line"><span>智能I代主机</span> * <span>1</span></div>
							<div class="info_line"><span>智能调光模块</span> * <span>15</span></div>
							<div class="info_line"><span>环境探测模块</span> * <span>2</span></div>
							<div class="info_line"><span>智能安防模块</span> * <span>8</span></div>
							<div class="info_line"><span>随意贴</span> * <span>8</span></div>
						</div>
					</div>
				</div>

				<div class="right">
					<div class="info_block">
						<div class="title">快速配置</div>

						<div class="body" id="roomType">
							<div class="info_line">1. 选择户型</div>
							<div class="btn_block">单身公寓</div>
							<div class="btn_block">双房</div>
							<div class="btn_block">三房</div>
							<div class="btn_block" name="custom">自定义</div>
						</div>
						<div class="body" id="customRoomType">
							<div class="info_line">1.1. 自定义户型</div>
							<div class="rich_block_container">
								<div class="control_btn">&nbsp;</div>
								<div class="rich_block">
									<span class="number">1</span><span>层</span>
								</div>
								<div class="control_btn">&nbsp;</div>
							</div>
							<div class="rich_block_container">
								<div class="control_btn">&nbsp;</div>
								<div class="rich_block">
									<span class="number">1</span><span>室</span>
								</div>
								<div class="control_btn">&nbsp;</div>
							</div>
							<div class="rich_block_container">
								<div class="control_btn">&nbsp;</div>
								<div class="rich_block">
									<span class="number">1</span><span>厅</span>
								</div>
								<div class="control_btn">&nbsp;</div>
							</div>
							<div class="rich_block_container">
								<div class="control_btn">&nbsp;</div>
								<div class="rich_block">
									<span class="number">1</span><span>厨</span>
								</div>
								<div class="control_btn">&nbsp;</div>
							</div>
							<div class="rich_block_container">
								<div class="control_btn">&nbsp;</div>
								<div class="rich_block">
									<span class="number">1</span><span>卫</span>
								</div>
								<div class="control_btn">&nbsp;</div>
							</div>
							<div class="rich_block_container">
								<div class="control_btn">&nbsp;</div>
								<div class="rich_block">
									<span class="number">1</span><span>窗</span>
								</div>
								<div class="control_btn">&nbsp;</div>
							</div>
						</div>

						<div class="body" style="display: none;">
							<div class="info_line">2. 家庭成员</div>
							<div class="btn_block">单身贵族</div>
							<div class="btn_block">二人世界</div>
							<div class="btn_block">三口之家</div>
							<div class="btn_block">三代同堂</div>
						</div>
						
						<div class="body"  style="display: none;">
							<div class="info_line">3. 推荐配置</div>
							<div class="btn_block" id="B_plan">基础版</div>
							<div class="btn_block" id="S_plan">标准版</div>
							<div class="btn_block" id="L_plan">豪华版</div>
							<div class="btn_block" id="vip_plan">VIP定制版</div>
							<div class="info_line">备注：VIP定制版无法产生预算价格，客服人员会尽快与您取得联系并由专人上门为您制定方案。</div>
						</div>
					</div>
				</div>
				<div class="clr"> </div>
			</div>
		</div>
		
		
	</body>
	
	
</html>